<template>
	<view v-if="Object.keys(userinfo).length !== 0">
		<!-- #ifdef MP -->
		<uni-nav-bar :shadow="false" :fixed="true" :border="false" right-text="菜单" @click-right="clickNavigationButton"></uni-nav-bar>
		<!-- #endif -->
		<!-- 头部 -->
		<view class="flex align-center p-3 border-bottom border-light-secondary">
			<image :src="userinfo.avatar" 
			style="width: 180rpx;height: 180rpx;"
			class="rounded-circle"></image>
			<view class="pl-3 flex flex-column flex-1">
				<view class="flex align-center">
					<view class="flex-1 flex flex-column align-center justify-center" v-for="(item,index) in counts" :key="index">
						<text class="font-lg font-weight-bold">{{item.num|formatNum}}</text>
						<text class="font text-muted">{{item.name}}</text>
					</view>
				</view>
				<view class="flex justify-center align-center">
					
					<button v-if="userinfo.isFollow===user_id"
					 type="default" size="mini"
					style="width: 400rpx;" @click="openUserInfo">
						编辑资料
					</button>
					
					<button v-else
					type="default" size="mini" 
					:class="userinfo.isFollow ? 'bg-light text-dark' : 'bg-main'"
					style="width: 400rpx;" @click="doFollow()">
						{{userinfo.isFollow ? '已关注' : '关注'}}
					</button>

				</view>
			</view>
		</view>
		
		<!-- tab -->
		<view class="flex align-center" style="height: 100rpx;">
			<view class="flex-1 flex align-center justify-center"
			v-for="(item,index) in tabBars" :key="index"
			:class="index === tabIndex ? 'font-lg font-weight-bold text-main':'font-md'"
			@click="changeTab(index)">
			{{item.name}}</view>
		</view>
		
		<template v-if="tabIndex === 0">
			<view class="animated fast fadeIn">
				<view class="p-3 border-bottom">
					<view class="font-md">账号信息</view>
					<view class="font">账号姓名：{{userinfo.username}}</view>
					<view class="font">账号年龄：{{userinfo.birthday|age_datetime}}</view>
					<view class="font">账号id：{{user_id}}</view>
				</view>
				<view class="p-3 border-bottom">
					<view class="font-md">个人信息</view>
					<view class="font">星座：{{userinfo.birthday | getHoroscope}}</view>
					<view class="font">职业：{{userinfo.job}}</view>
					<view class="font">故乡：{{userinfo.hometown || "无"}}</view>
					<view class="font">情感：{{userinfo.emotion}}</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="animate__animated animate__fast animate__fadeIn">
				<template v-if="tabBars[tabIndex].list.length>0">
					<block v-for="(item,index) in tabBars[tabIndex].list" :key="index" >
						<common-list  :item="item" :index="index"></common-list>
						<divider></divider>
					</block>
					<!-- 上拉加载 -->
					<load-more :loadmore="tabBars[tabIndex].loadmore"></load-more>
				</template>
				<template v-else>
					<no-thing></no-thing>
				</template>
			</view>
		</template>
		
		
		
		<!-- 弹出层 -->
		<uni-popup ref="popup" type="top">
			<view class="flex align-center justify-center font-md border-bottom py-2" hover-class="bg-light" @click="doBlack">
				<text class="iconfont icon-sousuo mr-2"></text> 
				{{userinfo.isblack ? '移出黑名单' : '加入黑名单'}}
			</view>
			<view v-if="!userinfo.isblack" class="flex align-center justify-center font-md py-2" hover-class="bg-light" @click="openChat">
				<text class="iconfont icon-shanchu mr-2"></text> 聊天
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	import commonList from '@/components/common/common-list.vue';
	import loadMore from '@/components/common/load-more.vue';
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue';
	import {getUserSpace,getUserPosts} from "@/network/login.js";
	import {getFollowAdd} from "@/network/follow.js";
	import NoThing from '@/components/common/no-thing';
	import $T from '@/common/msg_time.js';
	export default {
		components: {
			commonList,
			loadMore,
			uniPopup,
			uniNavBar,
			NoThing
		},
		data() {
			return {
				user_id:0,
				userinfo:{},
				counts:[],
				tabIndex:0,
				index:[0],
				tabBars:[{
					name:"主页",
					list:[]
				},{
					name:"帖子",
					max_id:null,
					list:[],
					// 1.上拉加载更多  2.加载中... 3.没有更多了
					loadmore:"上拉加载更多",
				},{
					name:"动态",
					max_id:null,
					list:[],
					// 1.上拉加载更多  2.加载中... 3.没有更多了
					loadmore:"上拉加载更多",
				}],
			}
		},
		onNavigationBarButtonTap() {
			this.clickNavigationButton()
		},
		filters: {
			formatNum(value) {
				return value > 99 ? '99+' : value;
			},
			age_datetime(value){
	
				return $T.age_datetime(value)
			},
			getHoroscope(value){
				return $T.getHoroscope(value)
			}
			
		},
		onUnload() {
			uni.$off("updateFollowOrSupport",(e)=>{})
		},
		onLoad(e) {
			this.user_id = parseInt(e.user_id)
			// 话题
			this.getPost(e.user_id)
			getUserSpace(e.user_id).then(attr=>{
				let [err,res] = attr
				this.counts = res.data.total
				this.userinfo = res.data.list[0]
				
			})
			
			uni.$on("updateFollowOrSupport",(e)=>{
				switch (e.type){
					case "follow":
					this.Follow(e.data.user_id)
						break;
					case "support":
					this.doSupport(e.data.news_list)
						break;
					case "comment":
					this.doComment(e.data.comment)
						break;	
				}
			})
			
		},
		
		onReachBottom(){
			this.loadmore()
		},
		methods: {
			clickNavigationButton(){
				this.$refs.popup.open()
			},
			changeTab(index){
				this.tabIndex = index
			},
			getPost(uid){
				
				getUserPosts(uid,"","").then(attr=>{
					let item = this.tabBars[1]
					let [err,res] = attr
					item.list = res.data.results
					item.loadmore = res.data.loadmore
					item.max_id = item.list.slice(-1)[0]?.id
					getUserPosts(uid,true,"").then(attr=>{
						let item = this.tabBars[2]
						let [err,res] = attr
						item.list = res.data.results
						item.loadmore = res.data.loadmore
						item.max_id = item.list.slice(-1)[0]?.id
					})
				})
			},
			
			// 关注功能
			Follow(user_id){
				this.tabBars.forEach(tab=>{
					if(tab.list.length>0){
						tab.list.forEach(item=>{
							if(item.user==user_id){
								item.isFollow = !item.isFollow
							}
						})
					}
					return
				})
				this.userinfo.isFollow = !this.userinfo.isFollow
			},
			doFollow(){
				getFollowAdd(this.user_id).then(attr=>{
					let [err,res] = attr
				})
				this.tabBars.forEach(tab=>{
					if(tab.list.length>0){
						tab.list.forEach(item=>{
							if(item.user==this.user_id){
								item.isFollow = !item.isFollow
							}
						})
					}
					return
				})
				this.userinfo.isFollow = !this.userinfo.isFollow
				uni.$emit('Logout')
				
			},
			// 评论
			doComment(e){
				this.tabBars.forEach(tab=>{
					if(tab.list.length>0){
						tab.list.forEach(item=>{
							if(item.id==e.id){
								item.comment_count = e.count
							}
						})
					}
					return
				})
			},
			// 顶踩操作
			doSupport(news_list){
					
					let types = news_list.type
					let msg = types==="support" ? "点赞" : "点踩"
					this.tabBars.forEach(tab=>{
						if(tab.list.length>0){
							tab.list.forEach(item=>{
								if(item.id==news_list.id){
									// 如果已点过则进行取消操作
									if(item.news_list.type===types){
										item.news_list[types+"_count"]--
										item.news_list.type=""
										uni.showToast({title:"取消成功"})
										return
									}
									// 如果没点过取消，且没选中任何功能，则执行
									if(item.news_list.type){
										let my_type = item.news_list.type
										item.news_list[my_type+"_count"]--
									}
									// 如果什么都没选执行
									item.news_list.type=types
									item.news_list[types+"_count"]++
									uni.showToast({title:msg+"成功"})
								}
							})
						}
						return
					})
			},
			loadmore(){
				let item = this.tabBars[this.tabIndex]
				if(item.loadmore!=="上拉加载更多") return
				// 修改列表状态
				item.loadmore = '加载中...'
				let status = ""
				if(item.name==="帖子"){
					status = true
				}
				// 模拟数据请求
				setTimeout(()=>{
					getUserPosts(this.user_id,status,item.max_id).then(attr=>{
						let [err,res] = attr
						item.loadmore = res.data.loadmore
						item.max_id =res.data.results.slice(-1)[0]?.id
						item.list = [...item.list,...res.data.results]
						
					})
				},2000)
			},
			// 进入编辑资料
			openUserInfo(){
				uni.navigateTo({
					url: '../user-userinfo/user-userinfo',
				});
			},
			getData(){
				getUserSpace(e.user_id).then(attr=>{
					let [err,res] = attr
					this.counts = res.data.total
					this.userinfo = res.data.list[0]	
				})
			},
			// 加入/移出黑名单
			doBlack(){
				
			},
			openChat(){
				this.navigateTo({
					url:`/pages/user-chat/user-chat?user=${this.user_id}&username=${this.userinfo.username}`
				})
			}
		}
	}

</script>

<style>

</style>
